<template>
  <div class="fx-badge" v-bind="$attrs" :class="[type,{dot:isDot}]">
    <transition name="scale">
      <div class="mark" v-if="typeof badgeValue==='string'||badgeValue>0||isDot">
        <em v-if="!isDot">{{ badgeValue }}</em>
      </div>
    </transition>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { ComponentTypes, componentTypesArr } from '@/base/types'

interface BadgeProps {
  modelValue: number | string;
  type: ComponentTypes;
  max: number;
  isDot: boolean;
}

export default defineComponent({
  name: 'FBadge',
  inheritAttrs: true,
  props: {
    modelValue: {
      type: [String, Number] as PropType<string | number>,
      default: ''
    },
    // 类型
    type: {
      type: String as PropType<ComponentTypes>,
      default: 'error',
      validator (val: ComponentTypes): boolean {
        return componentTypesArr.includes(val)
      }
    },
    // 最大值
    max: {
      type: Number as PropType<number>,
      default: null
    },
    // 是否红点
    isDot: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  setup (props: BadgeProps) {
    const badgeValue = computed<string | number>(() => {
      const isNaN = Number.isNaN(Number(props.modelValue))
      if (!isNaN && props.max && props.modelValue >= props.max) return `${props.max}+`
      return props.modelValue
    })

    return {
      badgeValue
    }
  }
})
</script>
